<template>
  <div>
    <a-card>
      <a-space>
        <a-input
          v-model:value="listQuery.title"
          placeholder="输入标题模糊搜索"
          allow-clear
          @keyup.enter="handleFilter"
        />
        <a-date-picker
          v-model:value="listQuery.startTime"
          valueFormat="YYYY-MM-DD 00:00:00"
          placeholder="选择开始时间"
          allow-clear
        />
        <a-date-picker
          v-model:value="listQuery.endTime"
          valueFormat="YYYY-MM-DD 23:59:59"
          placeholder="选择结束时间"
          allow-clear
        />
        <a-button type="primary" :icon="h(SearchOutlined)" @click="handleFilter">搜索</a-button>
        <a-button :icon="h(UndoOutlined)" @click="handleReset">重置</a-button>
      </a-space>
    </a-card>
    <a-card class="mt-2">
      <a-button type="primary" class="mb-4" :icon="h(PlusOutlined)" @click="handleAdd">
        添加
      </a-button>
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="tableLoading"
        :row-key="(row) => row.id + ''"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'actions'">
            <a-button size="small" type="link" @click="handleEdit(record)">编辑</a-button>
            <a-button size="small" type="link" danger @click="handleDelete(record)">删除</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:open="showModal" :mask-closable="false" :title="title">
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col="{ span: 3 }"
        style="padding-top: 20px"
      >
        <a-form-item label="标题" name="title">
          <a-input v-model:value="form.title" allow-clear placeholder="请输入标题" />
        </a-form-item>
        <a-form-item label="内容" name="content">
          <a-textarea v-model:value="form.content" :rows="4" allow-clear placeholder="请输入内容" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" :loading="formBtnLoading" @click="handleConfirm">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { h, onMounted, reactive, ref } from 'vue';
  import NoticeApi from '@/api/NoticeApi';
  import { PlusOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import { Rule } from 'ant-design-vue/es/form';
  import { resetReactive } from '@/utils';

  let columns = [
    { title: '标题', dataIndex: 'title', ellipsis: true },
    { title: '内容', dataIndex: 'content', ellipsis: true },
    { title: '创建时间', dataIndex: 'createTime', ellipsis: true },
    { title: '更新时间', dataIndex: 'updateTime', ellipsis: true },
    {
      title: '操作',
      dataIndex: 'actions',
      align: 'center',
      width: 180,
    },
  ];
  let data = ref([]);
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    onChange: (current: number) => {
      pagination.current = current;
      getList();
    },
  });
  onMounted(() => {
    getList();
  });

  const listQuery = reactive<any>({});

  const tableLoading = ref(false);

  function getList() {
    tableLoading.value = true;
    NoticeApi.page({ index: pagination.current, size: pagination.pageSize, ...listQuery })
      .then((res) => {
        data.value = res.data;
        pagination.total = res.total;
      })
      .finally(() => (tableLoading.value = false));
  }

  function handleFilter() {
    pagination.current = 1;
    getList();
  }

  function handleReset() {
    resetReactive(listQuery);
    handleFilter();
  }

  const showModal = ref(false);
  const title = ref('');
  const formRef = ref();
  let form = reactive<any>({});
  const rules: Record<string, Rule[]> = {
    title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
    content: [{ required: true, trigger: 'blur', message: '请输入内容' }],
  };

  function handleEdit(row) {
    showModal.value = true;
    title.value = '编辑';
    Object.assign(form, row);
    formRef.value?.clearValidate();
  }

  function handleAdd() {
    showModal.value = true;
    title.value = '添加';
    formRef.value?.clearValidate();
    resetReactive(form);
  }

  const formBtnLoading = ref(false);

  function handleConfirm() {
    formRef.value
      .validate()
      .then(() => {
        formBtnLoading.value = true;
        (form.id ? NoticeApi.update(form) : NoticeApi.save(form))
          .then(() => {
            message.success('提交成功');
            showModal.value = false;
            getList();
          })
          .finally(() => {
            formBtnLoading.value = false;
          });
      })
      .catch(() => {});
  }

  function handleDelete(row) {
    Modal.confirm({
      title: '提示',
      content: '确定删除这条记录吗',
      onOk: () => {
        NoticeApi.delete([row.id]).then(() => {
          message.success('操作成功');
          getList();
        });
      },
      onCancel: () => {},
    });
  }
</script>

<style scoped></style>
